<template>
  <div class="page-card">
    <plate-card :icon="TitleIcon" title="大棚种植生产">
      <div class="h-[80px] py-[4px] flex items-center justify-between flex-wrap">
        <div v-for="(item, index) in greenHouseInfo" :key="index" class="flex items-center info-item">
          <div class="text-[14px] w-[80px] min-w-[80px] text-center">{{ item.title }}</div>
          <div class="sign"> | </div>
          <el-tooltip v-if="index === 2" :content="item.value" effect="light" placement="top">
            <div class="text-[14px] text-white flex-1 text-center font-bold line-clamp-1 px-[8px]">{{ item.value }}</div>
          </el-tooltip>

          <div v-else class="text-[14px] text-white flex-1 text-center font-bold line-clamp-1">
            <span v-if="index != 3">{{ item.value }}</span>
            <span v-else>{{ currentStage }}</span>
          </div>
        </div>
      </div>
    </plate-card>
  </div>
</template>

<script lang="ts" setup>
  import PlateCard from '@/components/plate-card.vue'
  import TitleIcon from '@/assets/images/card-title/green-house.png'
  import { useEventBus } from '@vueuse/core'

  import { computed, ref } from 'vue'
  import { MapClickEvent } from '@/types/common.ts'
  import dayjs from 'dayjs'

  const greenHouseInfo = ref([
    { title: '大棚编号', value: '1/2/6' },
    { title: '面积', value: '2562 M²' },
    { title: '柑橘品种', value: '红美人' },
    { title: '生长阶段', value: '' }
  ])

  const houseData = [
    { code: '1#', area: 2740, variety: '红美人、黄美人、甘平', stage: '坐果抗逆期' },
    { code: '2#', area: 1092, variety: '红美人、黄美人、甘平、爱媛43、沃橙、由良、葡萄柚', stage: '生成期' },
    { code: '3#', area: 1736, variety: '红美人', stage: '坐果抗逆期' },
    { code: '4#', area: 384, variety: '红美人', stage: '坐果抗逆期' },
    { code: '5#', area: 1760, variety: '葡萄柚', stage: '坐果抗逆期' },
    { code: '6#', area: 2528, variety: '红美人、由良', stage: '坐果抗逆期' },
    { code: '7#', area: 308, variety: '爱媛46', stage: '坐果抗逆期' },
    { code: '8#', area: 1400, variety: '红美人', stage: '坐果抗逆期' },
    { code: '9#', area: 976, variety: '红美人', stage: '坐果抗逆期' },
    { code: '10#', area: 1312, variety: '红美人', stage: '坐果抗逆期' },
    { code: '11#', area: 216, variety: '爱媛43', stage: '坐果抗逆期' },
    { code: '12#', area: 408, variety: '晴姬', stage: '坐果抗逆期' },
    { code: '13#', area: 192, variety: '绿美人', stage: '坐果抗逆期' }
  ]

  const setData = (info: any) => {
    greenHouseInfo.value[0].value = info.code
    greenHouseInfo.value[1].value = info.area + 'M²'
    greenHouseInfo.value[2].value = info.variety
    greenHouseInfo.value[3].value = info.stage
  }
  setData(houseData[0])

  // 点击事件
  const bus = useEventBus<string>('farm')
  // @ts-ignore
  bus.on((event: MapClickEvent, payload) => {
    if (event === MapClickEvent.SWITCH_HOUSE_INFO) {
      try {
        setData(houseData[payload.index])
      } catch (e) {
        alert('信息获取失败')
      }
    }
  })

  // 生长期
  const currentStage = computed(() => {
    const now = dayjs()
    const month = now.month() + 1 // 月份从0开始
    const date = now.date()

    if ((month === 3 && date >= 15) || (month === 4 && date <= 15)) {
      return '初花期'
    }

    if ((month === 4 && date > 15) || (month === 5 && date <= 15)) {
      return '盛花期'
    }

    if (month === 4 && date > 15) {
      return '第一次生理落果'
    }

    if ((month === 5 && date > 15) || month === 6) {
      return '第二次生理落果'
    }

    if (month >= 7 && month <= 9) {
      return '果实膨大期'
    }

    if (month === 11 && date >= 15) {
      return '果实开始成熟'
    }

    return '采摘期'
  })
</script>

<style lang="scss" scoped>
  .info-item {
    //margin: 0 8px;
    width: 49%;
    height: 30px;
    border-radius: 4px;
    color: #00d9ff;
    //background: rgba(0, 154, 255, 0.4);
    background: rgba(0, 91, 163, 0.8);
  }
</style>
